// 内部处置
<template>
  <div class="Apply_bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s30">
          <li class="flexC JustifyContentFE flex2 textC"><p class="cursor" @click="getData()">内部处置</p></li>
        </ul>
      </div>
      <!-- 添加、显示筛选条件 -->
      <div class="selectList font_s18 colorF textC flex">
        <p class="selectBtn cursor font_s20" style="margin: 0 0.25rem;" @click="clearSelect()">清空筛选</p>
        <ul class="flex">
          <li class="selectItem" v-for="item in selectItems" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
      <div class="flexC modal_main">
        <ul class="flex colorF font_s22 textC AlignItemsC Title_ul ">
          <li class="flex2">序号</li>
          <li class="flex2">发现时间</li>
          <li class="flex3 Item_Hover">
            <p>
              类型
              <span style="font-size: 16px;color: #04a5ff;">▼</span>
            </p>
            <ul class="select_box selectType font_s20">
              <li @click="cancleSelected('类型')">全部</li>
              <li v-for="item in lxData" :key="item.id" @click="getCodeInfo('类型', item)">{{ item.name }}</li>
            </ul>
          </li>
          <li class="flex3">被监管对象</li>
          <li class="flex2 Item_Hover">
            <p>
              状态
              <span style="font-size: 16px;color: #04a5ff;">▼</span>
            </p>
            <ul class="select_box font_s20">
              <li @click="cancleSelected('状态')">全部</li>
              <li v-for="item in ztData" :key="item.id" @click="getCodeInfo('状态', item)">{{ item.name }}</li>
            </ul>
          </li>
          <li class="flex3">问题确认</li>
          <li class="flex2">派单时间</li>
          <li class="flex2">完成时间</li>
          <li class="flex2 Item_Hover">
            <p>
              处置结果
              <span style="font-size: 16px;color: #04a5ff;">▼</span>
            </p>
            <ul class="select_box font_s20">
              <li @click="cancleSelected('处置结果')">全部</li>
              <li v-for="item in czjgData" :key="item.id" @click="getCodeInfo('处置结果', item)">{{ item.name }}</li>
            </ul>
          </li>
        </ul>
        <div style="height: 50vh;" class="superviseList font_s20">
          <ul class="evenbgColor flex colorF textC AlignItemsC" style="font-weight:bold;" v-for="(item, index) in dataList" :key="'list' + index">
            <li class="flex2">{{ (current - 1) * pageSize + index + 1 }}</li>
            <li class="flex2">{{ item.fxsj }}</li>
            <li class="flex3">{{ item.jglx }}</li>
            <li class="flex3" style="padding: 0.685rem 0;">{{ item.bjgdx }}</li>
            <li class="flex2" style="line-height:1.625rem;padding: 0.685rem 0;">{{ item.czzt }}</li>
            <li class="flex3" style="padding: 0.685rem 0;">{{ item.jgqrnrbs }}</li>
            <li class="flex2" style="padding: 0.685rem 0;">{{ item.pdsj }}</li>
            <li class="flex2" style="line-height:1.625rem;padding: 0.685rem 0;">{{ item.czwcsj }}</li>
            <!-- 处置结果 -->
            <li class="flex2" :class="{ cursor: item.fjlb.length }" @click="showPdf(item)">{{ item.czjg }}</li>
            <!-- <li class="flex2" :class="{cursor:item.fjlb.length}" @click="item.czjg == '约谈' ? (choosePDF = true && (yutanpdf = item.bjgdx)) : (choosePDF = false)">{{ item.czjg }}</li> -->
            <!-- <li class="flex2">{{ item.czjg }}</li> -->
          </ul>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="wrapper"><pagination v-show="showPage" :total="total" :current="current" :pageSize="pageSize" @getPageSize="getPageSize" @jump="jump"></pagination></div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage"><p>没有符合条件的数据</p></div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage"><p>数据加载中，请等待...</p></div>
    <YiBaoRect03 v-if="choosePDF" @hidden="hiddenRect(choosePDF)" class="superviseList">
      <div v-for="(item, index) in srcPDF" :key="index" style="width: 100%;height: 100%;">
        <iframe :src="item.fjlj" scrolling="yes" style="width: 100%;height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </YiBaoRect03>
  </div>
</template>
<script>
import YiBaoRect03 from '@/components/YiBaoRect03'
export default {
  components: {
    YiBaoRect03,
    pagination: resolve => {
      require(['@/components/pagination'], resolve)
    }
  },
  data () {
    return {
      // 分页参数
      total: 20, // 总页数
      current: 1, // 当前页面下标
      pageSize: 10, // 页面显示条数
      showPage: true, // 显示隐藏分页
      yutanpdf: '',
      srcPDF: [],
      // 处置方式
      chuzhi: 1,
      // 弹窗组件调用
      choosePDF: false,
      // 请求到的数据赋值到本地的数组
      dataList: [],
      // 请求字典表接口获取数据
      // 类型
      lxData: [],
      // 状态
      ztData: [],
      // 处置结果
      czjgData: [],
      // 传递参数的对象
      postObj: {
        lxObj: '',
        ztObj: '',
        czjgObj: ''
      },
      // 已经选择的筛选条件
      selectItems: [],
      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 分页
    jump (index) {
      this.current = index
      this.postData()
    },
    getPageSize (pageSize) {
      this.current = 1
      this.pageSize = pageSize
      this.postData()
    },
    // 显示PDF弹窗的关闭事件
    hiddenRect (choose) {
      if (choose === this.choosePDF) {
        this.choosePDF = false
        // 清空数据
        this.srcPDF = []
      }
    },
    showPdf (pdfItem) {
      if (pdfItem.fjlb.length !== 0) {
        this.choosePDF = true
        // this.yutanpdf = pdfItem.fjlb[0].fjlj;
        this.srcPDF = pdfItem.fjlb
      }
    },
    // 清空按键的功能实现
    clearSelect () {
      this.showPage = true
      this.showErrorMessage = false
      this.selectItems = []
      this.dataList = []
      // Post请求完毕之后，将接收参数的postObj对象进行初始化赋值
      this.postObj.lxObj = ''
      this.postObj.ztObj = ''
      this.postObj.czjgObj = ''
      this.getData()
    },
    // 取消选择的筛选条件
    cancleSelected (cancleItem) {
      // 默认第一页
      this.current = 1
      this.showPage = true
      this.showErrorMessage = false
      if (cancleItem === '类型') {
        this.postObj.lxObj = ''
        let panduan = this.selectItems.filter(function (item) {
          return item.type === cancleItem
        })
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (selectIndex !== -1) {
          this.selectItems.splice(selectIndex, 1)
        }
      } else if (cancleItem === '状态') {
        this.postObj.ztObj = ''
        let panduan = this.selectItems.filter(function (item) {
          return item.type === cancleItem
        })
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (selectIndex !== -1) {
          this.selectItems.splice(selectIndex, 1)
        }
      } else if (cancleItem === '处置结果') {
        this.postObj.czjgObj = ''
        let panduan = this.selectItems.filter(function (item) {
          return item.type === cancleItem
        })
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (selectIndex !== -1) {
          this.selectItems.splice(selectIndex, 1)
        }
      }
      this.postData()
    },
    getData () {
      this.showPage = true
      this.showErrorMessage = false
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      // 请求列表的数据
      this.$http.post(this.$api.Bottom.internalDisposal, 'czfs=' + this.chuzhi + '&page=' + this.current + '&limit=' + this.pageSize, true).then(result => {
        this.dataList = result.data.result
        if (this.dataList.length === 0) {
          this.showPage = false
          this.showErrorMessage = true
          this.showWaitingMessage = false
        } else {
          this.showWaitingMessage = false
        }
        // 总页数
        this.total = Math.ceil(result.data.count / this.pageSize)
      })
      // 请求字典表中筛选条件的数据
      this.$http.get(this.$api.QueryDict.queryDict, true).then(result => {
        this.lxData = []
        this.ztData = []
        this.czjgData = []
        let temp = result.data.result
        for (let i = 0; i < temp.length; i++) {
          if (
            temp[i].description === 'JGJGLX' &&
            (temp[i].name === '常规检查' ||
              temp[i].name === '专项检查' ||
              temp[i].name === '飞行检查' ||
              temp[i].name === '信访投诉' ||
              temp[i].name === '两会提案' ||
              temp[i].name === '2.3级老人月服务大于14次或4级老人月服务大于23次' ||
              temp[i].name === '护理机构享受老人数月增（减）大于20%' ||
              temp[i].name === '日申请人数（初次评估）大于20人的护理机构')
          ) {
            // 存放（类型）筛选条件的选项数据
            this.lxData.push(temp[i])
          } else if (temp[i].description === 'DQZT') {
            if (temp[i].name === '处置完成' || temp[i].name === '处置中' || temp[i].name === '发现' || temp[i].name === '派单') {
              // 存放（状态）筛选条件的选项数据
              this.ztData.push(temp[i])
            }
          } else if (temp[i].description === 'CZJG') {
            // 存放（处置结果）筛选条件的选项数据
            this.czjgData.push(temp[i])
          }
        }
      })
    },
    // 点击筛选调教发起数据请求
    postData () {
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      this.$http
        .post(this.$api.Bottom.internalDisposal, 'czfs=' + this.chuzhi + '&jglx=' + this.postObj.lxObj + '&czzt=' + this.postObj.ztObj + '&czjg=' + this.postObj.czjgObj + '&page=' + this.current + '&limit=' + this.pageSize, true)
        .then(result => {
          // 将筛选结果的数据赋值到本地数组
          this.dataList = result.data.result
          if (this.dataList.length === 0) {
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
          // 总页数
          this.total = Math.ceil(result.data.count / this.pageSize)
        })
    },
    // 点击选择筛选条件
    getCodeInfo (source, codeInfo) {
      this.showErrorMessage = false
      // 默认第一页
      this.current = 1
      this.showPage = true
      let temp = {}
      if (source === '类型') {
        this.postObj.lxObj = codeInfo.code
        // 判断selectItems数组中是否有包含source属性对象
        let panduan = this.selectItems.filter(function (item) {
          return item.type === source
        })
        // 获取包含source属性对象的索引
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (panduan.length === 0) {
          // 当数组中不存在该对象时新建一个
          temp.type = source
          temp.name = codeInfo.name
          temp.value = codeInfo.code
          this.selectItems.push(temp)
        } else {
          // 当数组中存在该对象,获取索引并改变它的赋值
          this.selectItems[selectIndex].type = source
          this.selectItems[selectIndex].name = codeInfo.name
          this.selectItems[selectIndex].value = codeInfo.code
        }
        this.postData()
      } else if (source === '状态') {
        this.postObj.ztObj = codeInfo.code
        // 判断selectItems数组中是否有包含source属性对象
        let panduan = this.selectItems.filter(function (item) {
          return item.type === source
        })
        // 获取包含source属性对象的索引
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (panduan.length === 0) {
          // 当数组中不存在该对象时新建一个
          temp.type = source
          temp.name = codeInfo.name
          temp.value = codeInfo.code
          this.selectItems.push(temp)
        } else {
          // 当数组中存在该对象,获取索引并改变它的赋值
          this.selectItems[selectIndex].type = source
          this.selectItems[selectIndex].name = codeInfo.name
          this.selectItems[selectIndex].value = codeInfo.code
        }
        this.postData()
      } else if (source === '处置结果') {
        this.postObj.czjgObj = codeInfo.name
        // 判断selectItems数组中是否有包含source属性对象
        let panduan = this.selectItems.filter(function (item) {
          return item.type === source
        })
        // 获取包含source属性对象的索引
        let selectIndex = this.selectItems.indexOf(panduan[0])
        if (panduan.length === 0) {
          // 当数组中不存在该对象时新建一个
          temp.type = source
          temp.name = codeInfo.name
          temp.value = codeInfo.code
          this.selectItems.push(temp)
        } else {
          // 当数组中存在该对象,获取索引并改变它的赋值
          this.selectItems[selectIndex].type = source
          this.selectItems[selectIndex].name = codeInfo.name
          this.selectItems[selectIndex].value = codeInfo.code
        }
        this.postData()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.Title_ul {
  border: 1px solid rgba(0, 255, 255, 1);
  font-weight: bold;
  overflow: hidden;
  li {
    height: 2.825rem;
    line-height: 2.825rem;
  }
}
.Apply_bj {
  width: 100%;
  height: 100%;
  .wrapper {
    height: 100%;
    width: 100%;
  }
  .Inv_ul {
    margin: 0.825rem auto 3.25rem;
    color: rgba($color: #04a5ff, $alpha: 0.8);
    font-weight: bold;
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .evenbgColor:nth-child(odd) {
    background: rgba(0, 255, 255, 0.1);
  }
  .Item_Hover {
    cursor: pointer;
    .select_box {
      border: 1px solid #ffffff;
      padding: 0.25rem 1.625rem;
      background: #1d3843;
      position: absolute;
      display: none;
    }
    .selectType {
      width: 10%;
      li {
        height: auto;
        line-height: 1.5rem;
        padding-top: 1rem;
      }
    }
  }
  .Item_Hover:hover .select_box {
    display: block;
  }

  .select_box li {
    padding: 0;
  }
  .selectList {
    position: absolute;
    width: 50%;
    top: 14.5%;
    right: 10%;
    flex-direction: row-reverse;
    .selectBtn {
      width: 5.825rem;
      height: 2rem;
      line-height: 2rem;
      border: 0.5px solid#fff;
      font-weight: bold;
    }
    .selectItem {
      width: 6.825rem;
      height: 2rem;
      line-height: 2rem;
      border: 0.5px solid#fff;
      border-radius: 20px;
      margin-right: 0.325rem;
      overflow: hidden;
    }
  }
}
</style>
